<div ng-init="$ctrl.init()" class="card">
  <h6 class="card-header">
    {{$ctrl.folderType}} template editor
    <!-- <a class="btn-link text-primary btn-sm float-end py-0" data-bs-toggle="collapse"
            data-bs-target="#quick-{{$ctrl.folderType}}-layout-editor" role="button" aria-expanded="false"
            aria-controls="quick-{{$ctrl.folderType}}-layout-editor">
            <span class="far fa-minus-square text-primary"></span> Show/Hide</a> -->
    <a
      href="/portal/template/details/{{$ctrl.template.themeId}}/{{$ctrl.template.folderType}}/{{$ctrl.template.id}}"
      class="btn btn-link text-primary btn-sm float-end py-0"
    >
      <span class="fas fa-pen text-primary"></span> Edit {{$ctrl.folderType}}
      Template
    </a>
  </h6>
  <div
    id="quick-{{$ctrl.folderType}}-layout-editor"
    class="card-body collapse-x"
  >
    <div class="mb-3">
      <div class="input-group mb-3">
        <select
          class="form-select col-sm-4"
          ng-options="item as item.fileName for item in $ctrl.templates track by item.id"
          ng-model="$ctrl.template"
          ng-change="$ctrl.selectTemplate($ctrl.template)"
        ></select>
        <input
          class="form-control sel-filename"
          ng-change="$ctrl.new()"
          type="text"
          ng-model="$ctrl.template.fileName"
          value="{{$ctrl.template.fileName}}"
          placeholder="Input template name here..."
        />
      </div>
      <input
        class="template-id"
        type="hidden"
        ng-model="$ctrl.template.id"
        value="{{$ctrl.template.id}}"
      />
    </div>
    <tabs-v select-callback="$ctrl.selectPane(pane)">
      <pane-v header="Razor Template">
        <monaco-editor
          content-id="$ctrl.template.id"
          line-count="$ctrl.lineCount"
          update-content="$ctrl.updateTemplateContent(content)"
          is-readonly="$ctrl.isReadonly"
          is-visible="$ctrl.activedPane.header == 'Razor Template'"
          content="$ctrl.template.content"
        >
        </monaco-editor>
      </pane-v>
      <pane-v header="Scripts" ng-if="$ctrl.hideJs != 'true'">
        <monaco-editor
          content-id="$ctrl.template.id"
          line-count="$ctrl.lineCount"
          update-content="$ctrl.updateStyleContent(content)"
          is-readonly="$ctrl.isReadonly"
          is-visible="$ctrl.activedPane.header == 'Scripts'"
          content="$ctrl.template.scripts"
          default-content="'<script>\n\n</script>'"
        ></monaco-editor>
      </pane-v>
      <pane-v header="Styles" ng-if="$ctrl.hideJs != 'true'">
        <monaco-editor
          content-id="$ctrl.template.id"
          line-count="$ctrl.lineCount"
          update-content="$ctrl.updateScriptContent(content)"
          is-readonly="$ctrl.isReadonly"
          is-visible="$ctrl.activedPane.header == 'Styles'"
          content="$ctrl.template.styles"
          default-content="'<style>\n\n</style>'"
        >
        </monaco-editor>
      </pane-v>
    </tabs-v>
  </div>
</div>
